<template>
  <div id="aCoursesList" class="bg-fa of">
    <section class="container">
    <el-container style="height: auto">
      <el-main>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1">热点</el-menu-item>
          <el-menu-item index="2" >关注</el-menu-item>
          <el-menu-item index="3" >足迹</el-menu-item>
        </el-menu>
        <el-collapse  accordion>
        <el-card class="box-card" v-if="index==1" v-for="item in ariticle" :key="item.id">
          <div @click="addVisits(item.id)">
          <el-collapse-item>
            <template slot="title"  :name="item.id">
              <el-button style="float: left; padding: 3px 0" type="text">
                <i class="el-icon-date">{{item.gmtCreate}}</i>
              </el-button>
              ：
                <span style="font-size:1.575em ">{{item.articleTitle}}</span>
            </template>
            <div  class="ql-editor text item"  v-html="item.content" ></div>
            <i class="el-icon-user-solid" style="float: left; padding: 3px 0">浏览数：{{item.visits}}</i>
            <el-tag style="float: right; padding: 3px 0">
              <i>{{item.author}}</i>
            </el-tag>
            <div @click="articleCollect(item.id,item.iscollect)">
              <i  v-if="item.iscollect==false" class="el-icon-star-off" style="font-size: 20px;float: right; padding: 3px 0"></i>
              <i v-else class="el-icon-star-on" style="font-size: 20px;float: right; padding: 3px 0" ></i>
            </div>
          </el-collapse-item>
          </div>
        </el-card>
        </el-collapse>

        <el-collapse  accordion>
          <section class="no-data-wrap" v-if="collectlist.length==0 && index==2">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">你还没有关注的文章</span>
          </section>
        <el-card class="box-card" v-if="index==2" v-for="item in collectlist" :key="item.id">
            <el-collapse-item>
              <template slot="title"  :name="item.id">
                <el-button style="float: left; padding: 3px 0" type="text">
                  <i class="el-icon-date">{{item.gmtCreate}}</i>
                </el-button>
                ：
                <span style="font-size:1.575em ">{{item.articleTitle}}</span>
              </template>
              <div  class="ql-editor text item"  v-html="item.content" ></div>
              <i class="el-icon-user-solid" style="float: left; padding: 3px 0">浏览数：{{item.visits}}</i>
              <el-tag style="float: right; padding: 3px 0">
                <i>{{item.author}}</i>
              </el-tag>
              <div @click="articleCollect(item.id,item.iscollect)">
                <i  v-if="item.iscollect==false" class="el-icon-star-off" style="font-size: 20px;float: right; padding: 3px 0"></i>
                <i v-else class="el-icon-star-on" style="font-size: 20px;float: right; padding: 3px 0" ></i>
              </div>
            </el-collapse-item>
        </el-card>
        </el-collapse>

        <div class="block" v-if="index==3" style="margin-top: 5px">
          <section class="no-data-wrap" v-if="allFoot.length==0 && index==3">
          <em class="icon30 no-data-ico">&nbsp;</em>
          <span class="c-666 fsize14 ml10 vam">目前你还没足迹</span>
        </section>
          <el-timeline >
            <el-timeline-item :timestamp="item.gmtCreate" placement="top" v-for="item in allFoot" :key="item.id" color="#0bbd87">
              <el-card v-if="item.iscollect==1">
                <h4>关注 文章 {{item.articleTitle}}</h4>
                <p>{{item.author}} 在{{item.gmtCreate}} 关注</p>
              </el-card>
              <el-card v-if="item.iscollect==0">
                <h4>创作了 {{item.articleTitle}}</h4>
                <p>{{item.author}} 创作于 {{item.gmtCreate}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-main>
      <el-aside>
          <el-button type="primary" icon="el-icon-edit" circle style="margin-top: 20px" @click="gotoWrite"></el-button>
      </el-aside>
    </el-container>
    </section>
  </div>
</template>

<script>
  import cookie from 'js-cookie'
  import article from "@/api/article";
  export default {
    data() {
      return {
        activeName: 1,
        activeIndex: '1',
        index:'1',
        ariticle:{},
        collectlist:{},
        allFoot:{},
      };
    },
    created() {
      this.initariticle()

    },
    methods: {
      handleSelect(key, keyPath) {
        key==1?this.index=1:key==2?this.index=2:this.index=3
        if(key==2){
          this.initcollect()
        }
        if(key==3){
          this.initFoot()
        }
      },
      gotoWrite(){
        var jsonStr = cookie.get("ljh_ucenter");
        if(jsonStr){
         window.location.href="/write"
        }else {
          this.$message({
            type:"error",
            message:"请先登陆"
          })
        }
      },
      initFoot(){
        article.getFoot().then(response =>{
          this.allFoot=response.data.data.allFoot
        })
      },
      initariticle(){
        article.getAllariticle().then(response =>{
          this.ariticle=response.data.data.ariticle
        })
      },
      initcollect(){
        article.getAllcollect().then(response =>{
          this.collectlist=response.data.data.collectlist
        })
      },
      articleCollect(id,iscollect){
        var jsonStr = cookie.get("ljh_ucenter");
        if(jsonStr){
          if(iscollect==false){
            article.addCollect(id).then(response =>{
              this.$message({
                type:"success",
                message:response.data.message
              })
            })
            this.initariticle()
            this.initcollect()
          }else {
            article.deleteCollect(id).then(response =>{
              this.$message({
                type:"success",
                message:response.data.message
              })
            })
            this.initariticle()
            this.initcollect()
          }
        }else {
          this.$message({
            type:"error",
            message:"请先登陆"
          })
        }
      },
      addVisits(val){
        if(this.test==1){
          this.test=val
          article.addVistist(val)
          this.initariticle()
          return
        }
        if(this.test!=val){
          this.test=val
          article.addVistist(val)
          this.initariticle()
          return
        }
      },
    }
  }
</script>

<style>

</style>
